<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>2048</title>
    <style>
      .game {
        position: relative;
        margin: 20px;
        background-color: rgb(184, 175, 158);
        border-radius: 20px;
        position: relative;
        width: 500px;
        height: 500px;
      }
      .game-stage {
        position: absolute;
        top: 20px;
        bottom: 20px;
        left: 20px;
        right: 20px;
      }
      .game-grid {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 30px;
        transition: all 0.3s linear;
      }
    </style>
  </head>
  <body>
    <div class="game">
      <div class="game-stage" id="game"></div>
    </div>
  </body>
</html>
<script type="text/javascript" src="../tool/jquery.min.js"></script>
<script type="text/javascript" src="../dist/game-sq2.umd.js"></script>
<script type="text/javascript">
  console.log('------------------------');
  var game = new Sq2(document.querySelector('#game'), {
    onReady: function () {
      console.log('onReady game-------');
    },
    onFinish: function () {
      console.log('onFinish game-------');
    },
  });

  // test
  game.start();
  // game.create(0, 0, 0);
  // game.create(1, 1, 0);
  // game.create(2, 2, 0);
  // game.create(3, 3, 0);
  // game.create(4, 3, 1);
  // game.create(5, 2, 1);
  // game.create(6, 1, 1);
  // game.create(7, 0, 1);
  // game.create(8, 0, 2);
  // game.create(9, 0, 3);
  // game.create(10, 1, 3);
  // game.create(11, 2, 3);
  // game.create(12, 3, 3);
  // game.create();

  $('html').on('keydown', function (evt) {
    switch (evt.which) {
      case 38:
        game.move('up');
        break;
      case 40:
        game.move('down');
        break;
      case 39:
        game.move('right');
        break;
      case 37:
        game.move('left');
        break;
    }
  });
  console.log(game);
</script>
